<script>

import * as echarts from 'echarts';
// import $ from 'jquery'
export default {
  name: 'VisualizationTen',
  data() {
    return{
      data1: [5870,42,0,36,0,0,0,0,6,6,144,0,12,12,0,55,18,55,30,12,284,7,107,168,81,258,211,349,485,461,3591],
      data2: [5875,30,0,32,6,0,12,6,0,39,66,6,0,31,0,18,0,24,92,37,102,54,73,105, 150,213,278,296,567,836,3365],
      data3: [5875,48,0,45,0,0,0,5,0,0,151,0,12,6,0,19,18,55,30,6,307,7,82,154,75,22,230,380,449,230,3698],
      data4: [5875,36,0,18,0,0,0,6,0,0,105,0,0,0,6,12,12,12,12,0,188,6,55,72,31,155,143,297,392,319,4553],
      data5: [5875,48,6,33,0,6,0,0,0,0,152,0,0,0,0,18,0,61,6,18,244,6,49,114,73,257,218,411,329,426,3955],
    }
  },
  mounted() {
    this.init(this.data1, this.data2, this.data3, this.data4, this.data5)
  },
  methods: {
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    init(data1, data2, data3, data4, data5) {
      var chartDom = document.getElementById('main10');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '民宿各评分'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '评分: {b} 分 <br/> 数量: {c} 个' // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        },
        legend: {
          data: ['综合评分','卫生状况评分', '服务态度评分', '照片符合度评分', '设施装潢评分']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          name:"评分",
          type: 'category',
          boundaryGap: false,
          data: ["0","1.0","1.8","2.0","2.1","2.2","2.3","2.5","2.6","2.8","3.0","3.1",
            "3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","4.0","4.1","4.2","4.3",
            "4.4","4.5","4.6","4.7","4.8","4.9","5.0"]
        },
        yAxis: {
          name:"评分数量",
          type: 'value'
        },
        series: [
          {
            name: '综合评分',
            type: 'line',
            stack: 'Total',
            data: data1
          },
          {
            name: '卫生状况评分',
            type: 'line',
            stack: 'Total',
            data: data2
          },
          {
            name: '服务态度评分',
            type: 'line',
            stack: 'Total',
            data: data3
          },
          {
            name: '照片符合度评分',
            type: 'line',
            stack: 'Total',
            data: data4
          },
          {
            name: '设施装潢评分',
            type: 'line',
            stack: 'Total',
            data: data5
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }

}
</script>

<template>
  <div id="main10"></div>
</template>

<style scoped>
#main10 {
  width: 100%;
  height: 100%;
}
</style>